<template>
    <div class="app-container">
        <p>等接口</p>
        <el-form
            ref="queryParamsRef"
            :inline="true"
            :model="queryParams"
            label-width="auto"
            label-position="left"
        >
            <el-form-item label="查询单位：" prop="unitId">
                <DepartmentCascader v-model="queryParams.unitId" @change="getTableData"/>
            </el-form-item>
            <el-form-item label="派警日期：">
                <el-date-picker
                    v-model="searchTime"
                    type="daterange"
                    unlink-panels
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="截止时间"
                    value-format="YYYY-MM-DD"
                    @change="changeDateTimerHandle"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getTableData">
                    <el-icon class="me-1">
                        <Search/>
                    </el-icon>
                    查询
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                    <el-icon class="me-1">
                        <Refresh/>
                    </el-icon>
                    重置
                </el-button>
            </el-form-item>
        </el-form>


        <el-table
            :data="tableData"
            border
            stripe
            :row-style="tableRowStyle"
            show-summary
        >
            <el-table-column
                v-for="column in columns"
                :label="column.label"
                :prop="column.value"
                :key="column.value"
                align="center"
            >
                <template v-if="column.children.length >= 1">
                    <el-table-column
                        v-for="child in column.children"
                        :key="child.value"
                        :label="child.label"
                        :prop="child.value"
                        align="center"
                    />
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import {useTemplateRef} from "vue";
import DepartmentCascader from "@/components/DepartmentCascader/DepartmentCascader.vue";
import {Refresh, Search} from "@element-plus/icons-vue";

const searchTime = ref([]);
const queryParams = ref({
    // 部门 ID
    unitId: '',
    // 是否包含下级
    selChildren: false,
    // 干警姓名
    userName: '',
    params: {
        beginTime: '',
        endTime: ''
    }
});
const queryParamsRef = useTemplateRef('queryParamsRef')

const loading = ref(false)

const columns = [
    {
        label: '单位',
        value: 'unit',
        children: []
    },
    {
        label: '单位小计',
        value: 'unit',
        children: []
    },
    {
        label: '保护现场',
        value: 'unit',
        children: [
            {
                label: '人',
                value: 'people'
            },
            {
                label: '次',
                value: 'times'
            }
        ]
    },
    {
        label: '保护现场',
        value: 'unit',
        children: [
            {
                label: '人',
                value: 'people'
            },
            {
                label: '次',
                value: 'times'
            }
        ]
    },
    {
        label: '保护现场',
        value: 'unit',
        children: [
            {
                label: '人',
                value: 'people'
            },
            {
                label: '次',
                value: 'times'
            }
        ]
    },
    {
        label: '保护现场',
        value: 'unit',
        children: [
            {
                label: '人',
                value: 'people'
            },
            {
                label: '次',
                value: 'times'
            }
        ]
    },
    {
        label: '保护现场',
        value: 'unit',
        children: [
            {
                label: '人',
                value: 'people'
            },
            {
                label: '次',
                value: 'times'
            }
        ]
    },

]
const tableData = [
    {
        unit: '222',
        people: 222,
        times: 34
    },
    {
        unit: '222',
        people: 222,
        times: 34
    },
    {
        unit: '222',
        people: 222,
        times: 34
    },
    {
        unit: '222',
        people: 222,
        times: 34
    }
]
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
// 获取数据源
const getTableData = async () => {
}

// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }

    getTableData()
}

// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    queryParams.value.params.beginTime = '';
    queryParams.value.params.endTime = '';
    queryParams.value.selChildren = false;
    await getTableData()
}

</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

</style>